{% extends "base.html" %}
{% load bootstrap_toolkit %}
{% load i18n %}
{% block title %}{{ title }}{% endblock %}
{% block extra_head %}
{{ customerForm.media }}
{{ appointmentForm.media }}
<script src="{{ STATIC_URL }}appointment_manipulation.js"  ></script>

<script>
	"use strict";
  var globalCalendarId = {{ calendar_id }};
  var globalDateIso = "{{ date_iso }}";
</script>
{% endblock %}
{% block content %}
<h2>{{ title }}</h2>
<hr/>

<form id="appointment" name="appointment" action="" method="post" class="appointment">

	{% csrf_token %}
	<div style="display: inline;" >
		<div class="span3">
			{{ customerForm|as_bootstrap }}

		</div>
		<div class="span4">
			{{ appointmentForm|as_bootstrap }}
			{{ hiddenForm }}
		</div>
		
		<div class="span4">
      {% if free_space_errors %}
      <div class="control-group error">
      {% else %}
      <div class="control-group">
      {% endif %}
			<div class="control-group required">
				<label>{% trans "Unrestricted" %}</label>
				<input id="id_unrestricted" type="checkbox"/>
				<span id="car_choice">{{ carForm|as_bootstrap }}</span>
				<h4>{% trans "Available dates:" %} <label id="region_label">{% trans "unknown" %}</label></h4>
					<select id="id_free_space" name="free_space" size="20" style="width: 100%;"></select>
				</div>
        {% for err in free_space_errors %}
        <p class='help-block'>{{ err }}</p>
        {% endfor %}
				<span>{% trans "Control click an item to see details" %}</span>
			</div>
			<button class="btn btn-primary" type="submit">
				{% trans "Save" %}
			</button>
		</div>
	</div>
	<div id="status" class="info">

	</div>

</form>
{% endblock %}
